@import "default";
@import "common";

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    color: @color-normal;
    flex: 1;
    justify-content: center;
    background: @color-lighter;

    .tabs {
        width: 100%;
        height: 50px;
        line-height: 50px;
        float: left;
        background: @color-std-white;
        border-bottom: 2px solid @color-border-wrapper;

        li {
            width: 25%;
            float: left;
            font-size: 11pt;
            text-align: center;
            cursor: pointer;

            &.active {
                border-bottom: 2px solid @color-yellow;
            }
        }
    }

    .panes {
        width: 100%;
        overflow: hidden;

        .order {
            width: 100%;
            overflow: hidden;

            .header {
                width: 100%;
                .line-height(35px);

                .no {
                    width: 200px;
                    margin-left: 3%;
                    .float-left();
                    font-size: @font-9pt;

                    span {
                        font-size: @font-10pt;
                    }
                }

                .status {
                    width: 60px;
                    .float-right();
                    margin-right: 3%;
                    font-size: @font-10pt;
                    color: @color-yellow;
                }
            }

            .body {
                width: 100%;
                .float-left();
                overflow: hidden;
                min-width: 390px;


                .prod {
                    width: 100%;
                    height: 60px;
                    overflow: hidden;
                    background: @color-wrapper;
                    margin-bottom: 2px;

                    .img {
                        width: 60px;
                        height: 60px;
                        .float-left();

                        img {
                            width: 50px;
                            height: 50px;
                            margin: 5px;
                            text-align: center;
                            line-height: 50px;
                        }
                    }

                    .describe {
                        width: 240px;
                        padding-top: 5px;
                        height: 55px;
                        line-height: 30px;
                        .float-left();
                        overflow: hidden;

                        span {
                            .float-left();
                            margin-left: 10px;
                        }
                    }

                    .money {
                        width: 80px;
                        height: 60px;
                        .float-right();
                        margin-right: 10px;
                        line-height: 25px;

                        .price {
                            width: 70px;
                            height: 25px;
                            text-align: right;
                            margin-top: 5px;
                            .float-left();
                        }

                        .unit {
                            width: 70px;
                            height: 25px;
                            text-align: right;
                            margin-top: 5px;
                            .float-left();
                            color: @color-input;
                        }
                    }
                }
            }

            .footer {
                width: 100%;
                .float-left();
                overflow: hidden;

                .count {
                    width: 100%;
                    height: 25px;
                    line-height: 25px;
                    border-bottom: 1px solid @color-border;

                    .span {
                        .float-right();
                        margin-right: 10px;

                        .price {
                            font-size: @font-11pt;
                            font-weight: bold;
                        }
                    }
                }

                .tips {
                    width: 100%;
                    height: 25px;
                    line-height: 20px;
                    font-size: @font-9pt;
                    color: @color-yellow;
                    transform: scale(0.9,0.9);
                }

                .act {
                    width: 100%;
                    .line-height(30px);
                    border-bottom: 1px solid @color-border;

                    button {
                        font-size: @font-9pt;
                        padding: 2px 4px;
                        background: @color-lighter;
                        border-radius: 3px;
                        float: right;
                        margin-right: 10px;
                        border: 1px solid @color-wrapper;

                        &.cancel {
                            color: @color-normal;
                            border: 1px solid @color-border;
                        }

                        &.delete {
                            color: @color-input;
                            border: 1px solid @color-input;
                        }

                        &.buy {
                            color: @color-yellow;
                            border: 1px solid @color-yellow;
                        }

                        &.pay {
                            color: @color-cyan;
                            border: 1px solid @color-cyan;
                        }
                    }
                }
            }
        }
    }
}